<template>
<div>

  <van-tabs v-model="active">
    <van-tab title="主页">
      <div class="myInfo">
        <h2>基本信息</h2>
        <div>
          <p><span class="p1">用户名：</span><span>{{userInfo.userName}}</span></p>
          <p><span class="p1">手机号：</span><span>{{userInfo.phonenumber}}</span></p>
          <p><span class="p1">个人邮箱：</span><span>{{userInfo.email}}</span></p>

<!--          <p><span class="p1">个人说明：</span><span>{{userInfo.remark}}</span></p>-->
        </div>
      </div>
      <van-button color="#999999" style="border-radius: 5px; opacity: 0.5;" @click="loginOut">退出登录</van-button>
    </van-tab>

  </van-tabs>
</div>
</template>

<script>
import {getPersoninfo} from "@/api/api-Login";

export default {
name: "UserInfo",
  data(){
  return{
    userInfo:Array,
    active:0,
  }
  },
  methods:{
    loginOut(){
      this.$router.push("/")
    }
  },
  created() {
    // this.imgUrl = localStorage.getItem("img") || "http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg";
    getPersoninfo().then(res=>
    {
      console.log(res)
      if(res.code==0){

        this.userInfo = res.data;
        console.log(this.userInfo )

      }else {
        this.$toast("错误")
      }
    })
  }
}
</script>

<style scoped lang="less">
.new-do{
  text-align: center;
  color: #cccccc;
  margin-top: 30px;
}
.mysong{
  margin-top: 20px;
li{
  padding: 10px 20px;
.mysong-img{
  display: flex;
  justify-content: space-between;
  align-items: center;
img{
  width: 50px;
  height: 50px;
}
div{
  width: calc(100% - 60px);
}
div span:nth-of-type(2){
  font-size: 12px;
  color: #999999;
}
}
}
}
.myInfo{
  margin: 15% 5%;
  text-align: left;
  font-size: 14px;
  color: #999999;

h2{
  font-size: 18px;
  margin-bottom: 10px;
  color: black;
}

p{
  margin-bottom: 5px;
}
.p1{
  text-align: center;
  display: inline-block;
  width: 80px;
}
}
</style>